import React, { Component } from 'react'
import { Table, Divider, Button, Modal, Input } from 'antd'
import store from '../store'

const { Search } = Input;

export default class Crud extends Component {
    state = {
        // 编辑弹框的布尔
        visibleEdit: false,
        visible: false,
        // 表头
        columns: [
            {
                title: '名称',
                // 匹配数据的key
                dataIndex: 'name',
                // 唯一值
                key: 'name',
                // 渲染
                render: text => <a>{text}</a>
            },
            {
                title: '缩写',
                dataIndex: 'short',
                key: 'age',
            },
            {
                title: '数量',
                dataIndex: 'num',
                key: 'address',
            },
            {
                title: '操作',
                key: 'action',
                // render()
                render: (text, record, index) => {
                    return <span>
                        <Button onClick={() => {
                            this.showEdit(text)
                        }} type="primary">编辑</Button>
                        <Divider type="vertical" />
                        <Button onClick={() => {
                            store.dispatch({ type: "DEL_ITEM", index })
                            this.setState({})
                        }} type="danger">删除</Button>
                    </span>
                }
            }
        ],
        message: {
            name: "",
            short: "",
            num: ""
        },
        // 编辑弹框数据
        messageEdit: {}
    }
    // 编辑弹框
    showEdit = (messageEdit) => {
        this.setState({
            messageEdit,
            visibleEdit: true
        })
    }

    handleEditOk = () => {
        store.dispatch({ type: "CHANGE_ITEM", obj: this.state.messageEdit })
        this.setState({
            visibleEdit: false
        })
    }

    handleEditCancel = () => {
        this.setState({
            visibleEdit: false
        })
    }


    // 新增弹框
    showModal = () => {
        this.setState({
            visible: true
        })
    }

    handleOk = e => {
        this.state.message.key = String(Math.random()).slice(2, 8)
        store.dispatch({ type: "ADD_ITEM", list: this.state.message })
        this.setState({
            visible: false,
            message: {}
        })
    }

    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false
        })
    }
    render() {
        const { getState } = store
        const { message, columns, visibleEdit, messageEdit } = this.state
        const { name, short, num } = message
        return (
            <div>
                {/* 编辑弹框 */}
                <Modal
                    title="编辑信息"
                    visible={visibleEdit}
                    onOk={this.handleEditOk}
                    okText="确定"
                    cancelText="取消"
                    onCancel={this.handleEditCancel}
                >
                    <p className='flex'>
                        <span>
                            名称:
                        </span>
                        <Input value={messageEdit.name} onChange={(ev) => {
                            this.setState({
                                messageEdit: {
                                    ...this.state.messageEdit,
                                    name: ev.target.value
                                }
                            })
                        }} placeholder="请输入名称" />
                    </p>
                    <p className='flex'>
                        <span>
                            缩写:
                        </span>
                        <Input value={messageEdit.short} onChange={(ev) => {
                            this.setState({
                                messageEdit: {
                                    ...this.state.messageEdit,
                                    short: ev.target.value
                                }
                            })
                        }} placeholder="请输入缩写" />
                    </p>
                    <p className='flex'>
                        <span>
                            数量:
                        </span>
                        <Input value={messageEdit.num} onChange={(ev) => {
                            this.setState({
                                messageEdit: {
                                    ...this.state.messageEdit,
                                    num: ev.target.value
                                }
                            })
                        }} placeholder="请输入数量" />
                    </p>
                </Modal>

                {/* 查找 */}
                <Search placeholder="input search text" onSearch={(value) => {
                    store.dispatch({ type: "SEARCH", value })
                    this.setState({})
                }} enterButton />
                {/* 新增弹框 */}
                <Button type="primary" onClick={this.showModal}>
                    新增
                </Button>
                <Modal
                    title="新增信息"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    okText="确定"
                    cancelText="取消"
                    onCancel={this.handleCancel}
                >
                    <p className='flex'>
                        <span>
                            名称:
                        </span>
                        <Input value={name} onChange={(ev) => {
                            // 浅拷贝
                            // message.name = ev.target.value
                            // this.setState({})
                            // 深拷贝
                            this.setState({
                                message: {
                                    ...this.state.message,
                                    name: ev.target.value
                                }
                            })
                        }} placeholder="请输入名称" />
                    </p>
                    <p className='flex'>
                        <span>
                            缩写:
                        </span>
                        <Input value={short} onChange={(ev) => {
                            this.setState({
                                message: {
                                    ...this.state.message,
                                    short: ev.target.value
                                }
                            })
                        }} placeholder="请输入缩写" />
                    </p>
                    <p className='flex'>
                        <span>
                            数量:
                        </span>
                        <Input value={num} onChange={(ev) => {
                            this.setState({
                                message: {
                                    ...this.state.message,
                                    num: ev.target.value
                                }
                            })
                        }} placeholder="请输入数量" />
                    </p>
                </Modal>
                <Table columns={columns} dataSource={getState().list} />
            </div>
        )
    }
}
